<template>
    <li>
        <div @click="show = !show">
            {{ model.name }}
            <span v-show="hasChildren">【{{ show ? '-' : '+' }}】</span>
        </div>
        <ul v-show="show" v-if="hasChildren">
            <TreeItem v-for="item in model.children" :model="item" />
        </ul>
    </li>
</template>
<script>

export default {
    name: "TreeItem",
    props: ["model"],
    data() {
        return {
            show: false
        }
    },
    computed: {
        hasChildren() {
            return this.model.children && this.model.children.length > 0
        },
    },
}
</script>